/// <reference path="_variables.scss" />
/// <reference path="_functions.scss" />
/// <reference path="_mixins.scss" />

// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.

.badge {
  // scss-docs-start badge-css-vars
  --badge-padding-x: #{$badge-padding-x};
  --badge-padding-y: #{$badge-padding-y};
  --badge-content-shift: #{$badge-content-shift};
  --badge-font-size: #{$badge-font-size};
  --badge-font-weight: #{$badge-font-weight};
  --badge-line-height: 1.25;
  --badge-bg: transparent;
  --badge-bg-rgb: 255, 255, 255;
  --badge-color: inherit;
  --badge-border-radius: #{$badge-border-radius};
  --badge-transition: #{$badge-transition};
  // scss-docs-end badge-css-vars

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375em;
  padding-top: calc(var(--badge-padding-y) + var(--badge-content-shift));
  padding-bottom: calc(var(--badge-padding-y) - var(--badge-content-shift));
  padding-inline: var(--badge-padding-x);
  font-size: #{cssmax(12px, var(--badge-font-size))};
  font-weight: var(--badge-font-weight);
  line-height: cssmax(16px, calc(var(--badge-line-height) * 1em));
  color: var(--badge-color);
  background-color: unquote("rgba(var(--badge-bg-rgb), var(--badge-bg-opacity, 1))");
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  text-decoration: none;
  @include border-radius(var(--badge-border-radius));
  @include transition(var(--badge-transition));

  @at-root a#{&} {
    &:hover,
    &:active {
        text-decoration: none;
        color: var(--badge-hover-color, var(--badge-color));
        background-color: unquote("rgba(var(--badge-hover-bg-rgb, var(--badge-bg-rgb)), var(--badge-hover-bg-opacity, var(--badge-bg-opacity, 1)))");
    }
  }

  // Empty badges collapse automatically
  &:empty {
    display: none;
  }
}

// Pill badges
//
// Make them extra rounded with a modifier to replace v3's badges.

.badge-pill {
  --badge-padding-x: #{$badge-pill-padding-x} !important;
  --badge-border-radius: #{$badge-pill-border-radius} !important;
}

// Colors
//
// Contextual variations (linked badges get darker on :hover).

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    --badge-base-rgb: #{to-rgb($value)};
    --badge-bg: #{$value};
    --badge-bg-rgb: #{to-rgb($value)};
    --badge-color: #{color-yiq($value)};

    @at-root a#{&} {
      $hoverbg: darken($value, 7%);
      --badge-hover-bg: #{$hoverbg};
      --badge-hover-bg-rgb: #{to-rgb($hoverbg)};
    }
  }
}
